<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="headCont">
        <div class="userCont">
          <div class="userImg">
            <img :src="userInfo.head_img" />
          </div>
          <div class="userInfo">
            <div class="userName">
              <div>{{ userInfo.nick_name }}</div>
              <div class="userTag">已实名</div>
            </div>
            <div class="userDes">
              <div class="workTag">
                <img src="/img/work.png" />
                <div>前端</div>
              </div>
              <div>UID：{{ userInfo.uid }}</div>
              <div @click="copyFn" class="copyBtn iconfont icon-fuzhi"></div>
            </div>
          </div>
        </div>
        <div class="carCont">
          <div class="carItem">
            <div class="carNum">{{ userInfo.xmzp }}</div>
            <div class="carName">项目作品</div>
          </div>
          <div class="carItem">
            <div class="carNum">{{ userInfo.ljjd }}</div>
            <div class="carName">累计接单</div>
          </div>
          <div class="carItem">
            <div class="carNum">{{ userInfo.ljzb }}</div>
            <div class="carName">累计中标</div>
          </div>
        </div>
        <div class="vipCont" v-if="userInfo.is_member == 1" @click="toVip">
          <!-- <img src="/img/vip.png" /> -->
          <div class="vipIcon iconfont icon-f-vip1"></div>
          <div class="vipInfo">
            <div class="vipName">开发者会员</div>
            <div class="vipDes">平台优先派单 接单不上限</div>
          </div>
          <div class="openBtn">开通会员</div>
        </div>
        <div class="vipCont" v-if="userInfo.is_member != 1" @click="toVip">
          <div class="vipIcon iconfont icon-f-vip1"></div>
          <div class="vipInfo">
            <div class="vipName">开发者会员</div>
            <div class="vipDes">到期时间：{{ userInfo.member_time }}</div>
          </div>
          <div class="openBtn">
            {{ userInfo.is_member == 3 ? "续费会员" : "会员中心" }}
          </div>
        </div>
      </div>
      <div class="creatCar" v-if="userInfo.is_cv == 1">
        <div class="noInfoName">您还没有编辑简历</div>
        <div class="toSetBtn" @click="bookFn">+ 立即编辑</div>
      </div>
      <div class="navCont">
        <div class="navItem" @click="saveFn">
          <div class="iconfont icon-shoucangguanzhu"></div>
          <div>我的收藏</div>
        </div>
        <div class="navItem" @click="sendBookFn">
          <div class="iconfont icon-jianli"></div>
          <div>简历投递</div>
        </div>
        <div class="navItem" @click="bindFn">
          <div class="iconfont icon-zhanghaobangding-icon"></div>
          <div>账户绑定</div>
        </div>
        <div class="navItem" @click="orderSetFn">
          <div class="iconfont icon-dingdanshezhi"></div>
          <div>接单设置</div>
        </div>
      </div>
      <div class="listCont">
        <div
          class="listItem"
          :key="index"
          @click="listFn(item)"
          v-for="(item, index) in listArr"
        >
          <div :class="'tagIcon iconfont ' + item.icon"></div>
          <div class="listName">
            {{ item.name }}
            <span v-if="item.name == '实名认证'">
              <span class="greenBtn" v-if="userInfo.is_auth == 2"
                >(已认证)</span
              >
              <span class="blueBtn" v-if="userInfo.is_auth == 1">(未认证)</span>
            </span>
            <span v-if="item.name == '我的简历'">
              <span class="blueBtn" v-if="userInfo.cv_status == 1"
                >(审核中)</span
              >
              <span class="redBtn" v-if="userInfo.cv_status == 3"
                >(已驳回)</span
              >
            </span>
          </div>
          <div class="iconfont icon-jiantou"></div>
        </div>
      </div>
    </div>
    <footcpm></footcpm>
    <van-popup v-model:show="showTalk" round position="bottom">
      <div class="maskCont">
        <div class="maskTitle">联系我们</div>
        <div class="talkImg">
          <img src="/img/erweima.jpg" />
        </div>
        <div class="maskDes textCenter">长按二维码添加客服微信</div>
        <div class="maskDes flexCont bigFont">
          <div class="iconfont icon-dianhua2"></div>
          <div>18483613963</div>
        </div>
        <div class="maskDes textCenter">欢迎致电，我们将为您提供帮助！</div>
        <div @click="telFn" class="copyBtn">立即拨号</div>
      </div>
    </van-popup>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import footcpm from "@/components/footcpm.vue";
import { My } from "@/http/api";
import { showToast, showSuccessToast, showConfirmDialog } from "vant";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { footcpm, load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showTalk: false,
      userInfo: {},
      listArr: [
        { name: "我的简历", icon: "icon-guanyu1", url: "" },
        { name: "实名认证", icon: "icon-guanyu1", url: "" },
        { name: "关于我们", icon: "icon-guanyu1", url: "" },
        { name: "意见反馈", icon: "icon-falvyijian", url: "" },
        { name: "联系我们", icon: "icon-kefu2" },
        // {name:'帮助中心',icon:'icon-bangzhu',url:''},
        { name: "合作申请", icon: "icon-wanshandeshengtaihezuo", url: "" },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    telFn() {
      window.location.href = "tel:18483613963";
    },
    copyFn() {
      let oInput = document.createElement("input");
      oInput.value = this.userInfo.uid;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      showSuccessToast("复制成功");
      oInput.remove();
    },
    showRateFn() {
      showConfirmDialog({
        title: "怎么提升信用分？",
        confirmButtonText: "去提升",
        message: "添加更多的项目作品，可提升信用分。",
      })
        .then(() => {
          // on confirm
          this.$router.push({ path: "/book" });
        })
        .catch(() => {
          // on cancel
        });
    },
    bookFn() {
      this.$router.push({ path: "/book" });
    },
    recordFn() {
      this.$router.push({ path: "/record" });
    },
    toVip() {
      this.$router.push({ path: "/money" });
    },
    saveFn() {
      this.$router.push({ path: "/save" });
    },
    sendBookFn() {
      this.$router.push({ path: "/sendBook" });
    },
    orderSetFn() {
      this.$router.push({ path: "/orderSet" });
    },
    bindFn() {
      this.$router.push({ path: "/numSet" });
    },
    authFn() {
      this.$router.push({ path: "/auth" });
    },
    listFn(item) {
      if (item.name == "联系我们") {
        this.showTalk = true;
      } else if (item.name == "关于我们") {
        this.$router.push({ path: "/about" });
      } else if (item.name == "意见反馈") {
        this.$router.push({ path: "/report" });
      } else if (item.name == "合作申请") {
        this.$router.push({ path: "/joinUs" });
      } else if (item.name == "实名认证") {
        this.$router.push({ path: "/auth" });
      } else if (item.name == "我的简历") {
        this.$router.push({ path: "/book" });
      }
    },
    getData() {
      My()
        .then((res) => {
          if (res.data.code == 1) {
            this.userInfo = res.data.data;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
    // this.showTimeOut = true;
    // this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f1f4fc;
  .showCont {
    padding-bottom: 3rem;
    box-sizing: border-box;
    .headCont {
      background-image: linear-gradient(to right bottom, #cbd8f7, #86a9fb);
      padding: 0.75rem 4% 0.75rem;
      box-sizing: border-box;
      color: #fff;
      position: relative;
      overflow: hidden;

      .userCont {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.75rem 0;
        .userImg {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          border: 3px solid #fff;
          overflow: hidden;
          img {
            border-radius: 50%;
            width: 100%;
          }
        }
        .userInfo {
          align-items: center;
          font-size: 0.9rem;
          margin-left: 0.75rem;
          .userName {
            font-weight: bold;
            display: flex;
            align-items: center;
            .userTag {
              padding: 0.1rem 0.5rem;
              background-color: #fff;
              color: #86a9fb;
              font-size: 0.6rem;
              font-weight: normal;
              border-radius: 0.1rem;
              margin-left: 0.5rem;
              transform: scale(0.9);
            }
          }
          .userDes {
            font-size: 0.6rem;
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
            .copyBtn {
              margin-left: 0.75rem;
            }
            .workTag {
              display: flex;
              align-items: center;
              margin-right: 0.75rem;
              img {
                height: 1rem;
                position: relative;
                top: -0.1rem;
                margin-right: 0.25rem;
              }
            }
          }
        }
      }
      .carCont {
        width: 100%;
        background-color: #9cb2e4;
        padding: 0.75rem;
        box-sizing: border-box;
        border-radius: 0.25rem;
        margin-top: 0.25rem;
        display: flex;
        justify-content: space-between;
        .carItem {
          width: 30%;
          text-align: center;
          font-size: 0.6rem;
          .carName {
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
              font-weight: bold;
            }
          }
          .carNum {
            font-size: 1rem;
            margin-bottom: 0.5rem;
          }
        }
      }
      .vipCont {
        width: 100%;
        margin: 0.75rem auto 0;
        background-image: linear-gradient(to right, #a0bbfa, #c5d5fb);
        // background-color: #fff;
        display: flex;
        justify-content: space-between;
        color: #fff;
        padding: 0.5rem 0.75rem;
        box-sizing: border-box;
        border-radius: 0.25rem;
        font-size: 0.6rem;
        align-items: center;
        img {
          height: 1.5rem;
          margin-right: 0.5rem;
        }
        .vipIcon {
          font-size: 1.5rem;
        }
        .vipInfo {
          flex: 1;
          width: 1rem;
          margin: 0 0.5rem;
          .vipName {
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 0.25rem;
          }
          .vipDes {
            font-size: 0.6rem;
          }
        }
        .openBtn {
          padding: 0.3rem 0.75rem;
          box-sizing: border-box;
          border: 1px solid #fff;
          color: #fff;
          font-size: 0.6rem;
          border-radius: 0.15rem;
        }
      }
    }
    .creatCar,
    .bookCont {
      // border: 2px solid #86a9fb;
      width: 92%;
      margin: 1rem auto;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      border-radius: 0.25rem;
      background-color: #fff;
      .noInfoName {
        text-align: center;
        font-size: 0.9rem;
        font-weight: bold;
        padding: 0.75rem 0;
      }
      .toSetBtn {
        padding: 0.75rem 0;
        text-align: center;
        width: 100%;
        margin-top: 0.75rem;
        background-image: linear-gradient(to right bottom, #cbd8f7, #86a9fb);
        color: #fff;
        border-radius: 0.25rem;
        font-size: 0.6rem;
      }
    }
    .bookCont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bookLeft {
        display: flex;
        align-items: center;
      }
      .bookBtn {
        font-size: 0.6rem;
        color: #86a9fb;
      }
    }
    .navCont {
      width: 92%;
      margin: 0.75rem auto;
      background-color: #fff;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .navItem {
        width: 34%;
        padding: 0.75rem 0.5rem;
        box-sizing: border-box;
        text-align: center;
        color: #333;
        .iconfont {
          font-size: 1.5rem;
          line-height: 2rem;
          color: #86a9fb;
          margin-bottom: 0.25rem;
        }
      }
    }
    .listCont {
      width: 92%;
      margin: 1rem auto;
      border-radius: 0.25rem;
      background-color: #fff;
      .listItem {
        width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        color: #333;
        img {
          height: 1rem;
        }
        .listName {
          flex: 1;
          width: 1rem;
          margin: 0 0.75rem;
          .greenBtn {
            color: #85ce61;
          }
          .blueBtn {
            color: #86a9fb;
          }
          .redBtn {
            color: #f56c6c;
          }
        }
        .iconfont {
          color: #333;
        }
        .tagIcon {
          font-size: 1rem;
        }
      }
    }
  }
  .maskCont {
    padding: 0.75rem 4%;
    box-sizing: border-box;
    .maskTitle {
      text-align: center;
      font-size: 0.9rem;
      font-weight: bold;
    }
    .talkImg {
      text-align: center;
      margin: 0.75rem 0;
      img {
        width: 40%;
      }
    }
    .maskDes {
      font-size: 0.65rem;
      margin: 0.75rem 0;
      .redText {
        color: rgb(247, 83, 37);
      }
    }
    .textCenter {
      text-align: center;
    }
    .flexCont {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bigFont {
      font-size: 1rem;
      font-weight: bold;
      .iconfont {
        font-size: 1.2rem;
        margin-right: 0.25rem;
      }
    }
    .copyBtn {
      background-color: #86a9fb;
      width: 100%;
      margin-top: 1rem;
      text-align: center;
      padding: 0.75rem 0;
      border-radius: 0.25rem;
      color: #fff;
      font-size: 0.6rem;
    }
    .maskArr {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .maskArrItem {
        text-align: center;
        width: 48%;
        background-color: #86a9fb;
        // border: 1px solid #ccc;
        border-radius: 0.25rem;
        padding: 0.6rem 0;
        color: #333;
        font-size: 0.65rem;
        margin-bottom: 0.75rem;
        color: #fff;
      }
      .disLink {
        opacity: 0.5;
      }
    }
  }
}
</style>
